<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h3>请选择你喜欢的专栏</h3>
      <span v-for="item in list" :key="item.id">
        <input type="checkbox" :value="item" v-model="newList" />{{item}}
      </span>
      <ul>
        <li v-for="item in newList">{{item}}</li>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
      const app = new Vue({
        el: '#app',
        data: {
          newList: [],
          list: ['科幻', '喜剧', '动漫', '冒险', '科技', '军事', '娱乐', '奇闻']
          //   list:
          //     { id: 1, name: '科幻' },
          //     { id: 2, name: '喜剧' },
          //     { id: 3, name: '动漫' },
          //     { id: 4, name: '冒险' },
          //     { id: 5, name: '科技' },
          //     { id: 6, name: '军事' },
          //     { id: 7, name: '娱乐' },
          //     { id: 8, name: '奇闻' }
          //   ]
        }
        // methods: {
        //   show(id) {
        //     const res = this.list.find(item => item.id === id)
        //     this.newList.push(res)
        //   }
        // }
      })
    </script>
  </body>
</html>
